Ocumetra — Work · Mirsha Balderas
UX/UI Designer

Ocumetra

2023—2026

At Ocumetra I led UX/UI design for a regulated clinical SaaS product — from early UX strategy and prototyping to design systems, responsive interfaces, developer handoff and design QA. What follows is a selection of that work: clinical products, data visualisation, accessibility, marketing sites and the graphic design around them.

mEYE® Suite — Powered by Ocumetra

Protecting Vision for Life, Supporting Health for Generations

Children playing outdoors
We believe in better
eye health for children
01

Role & Scope

Sole product designer on the Ocumetra mEYE® Suite — a myopia-management platform for eye-care professionals — and its marketing sites. I owned it end-to-end: from UX strategy and prototyping to the design system, responsive build support, developer handoff and design QA, all inside a regulated clinical setting.

The hard part: take dense clinical data (axial length, growth percentiles, progression risk) and make it readable for two very different people at once — the clinician who needs precision and reference ranges, and the parent who just needs to know what it means for their child.

  • Product UX/UI Lead
  • Design System Owner
  • Data Visualisation Dual-audience
  • Accessibility WCAG 2.1
  • Marketing Site Design
  • Handoff & Design QA Figma
02

The Platform

mEYE Suite running on a tablet
mEYE® Suite dashboardResponsive · Tablet
Product across devices
Cross-deviceiMac · iPad · iPhone
Next-gen learning marketing page
Next-gen learningMarketing
Partner program page
Let's change myopia mgmtPartners
03

Brand & Partnerships

Great partnerships unlock limitless potential. Beyond the product, I shaped the marketing story and visual system Ocumetra uses with clinics, distributors and academic partners — so the product and the brand feel like one thing.

  • Marketing Web Design
  • Illustration System Direction
  • Pitch & Print Layout
Great partnerships unlock limitless potential
Great partnerships
unlock limitless potential
mEYE Suite in context
Crafted for the clinic,
calm enough for the home
04

Design System

// Palette
Gray 900
#0B0F19
Ink 800
#170F49
Ocumetra Green
#01977B
Gray 600
#475569
Magenta
#E44890
Blue
#3030F0
Gold
#D89C30
Gray 200
#D4D7E5
// Typography — Montserrat + Archivo
Display
56/110
Better vision, for life
H1
40/110
Protecting vision
H2
30/110
Great partnerships
Body
16/170
Interface text and general product content, tuned for comfortable clinical reading.
// Spacing scale — 4px base
4
8
12
16
24
32
48
64
// Radius
0
8
12
full
// Components — Button
State Background Text
Default accent on-accent
Hover accent-700 on-accent
Disabled card-bg muted
// Button tokens (3-layer)
Primitive--ocumetra-green: #01977B
Semantic--accent: var(--ocumetra-green)
Component--btn-bg: var(--accent)
Component--btn-radius: 9999px · --btn-pad: 13/28
05

UI Screens

A few production screens from the mEYE® Suite — the same system running across auth, subscription and clinical records. All built on the tokens and components above.

  • Auth & Onboarding Flow
  • Subscription Pricing
  • Clinical Records Data table
Set a new password screen
Set a new passwordAuth
Subscription plans screen
Choose your planSubscription
Report history data table
Report HistoryData table
06

Impact at a Glance

~25%
Handoff cycle reduction
4
Products in the mEYE Suite
3yr
End-to-end ownership
AA
WCAG 2.1 target
2
Audiences in one system
50+
Reusable UI components
3
Token layers (P→S→C)
100%
Token-driven components